<template>
	<view>
		<div class="recharge">
			<div class="money_conetnt">
				<div>充值金额</div>
				<div class="recharge_money">
					<span>￥</span>
					<input v-model="money" style="border: none;" type="number" id="rec" placeholder="请输入金额"
						oninput="var ary = this.value.match(/(\d+(\.\d{0,2})?)/);this.value=ary==null?'':ary[0];" />
				</div>
			</div>
		</div>
		<div class="balance_btn">
			<button class="button button-fill button-big" @click="pay()">下一步</button>
		</div>
		<view>
			<view :hidden="userFeedbackHidden" class="popup_content">
				<view class="popup_textarea_item">
					<view style="display:flex;justify-content: center;">
						<image :src="qrcode" style="width:150px;height:150px"></image>
					</view>
					<view style="display:flex;justify-content: center;">截图保存后扫码支付</view>
					<view @click="submitFeedback()" class="buttons">
						<text class="popup_button">关闭</text>
					</view>
				</view>
			</view>
			<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrcode: '',
				userFeedbackHidden: true,
				money: 100,
				order_id: 0,
			};
		},
		onLoad(options) {

		},
		methods: {
			showDiv() {
				this.userFeedbackHidden = false
			},
			hideDiv() {
				this.userFeedbackHidden = true
			},
			pay() {
				let that = this
				var mon = this.money;
				var reg = /^[0-9]+([.]{1}[0-9]{1}[1-9]{1})?$/;

				if (!reg.test(mon)) {

					alert("金额不得小于0.01元!");

					return false;

				} else {
					if (mon == 0) {

						alert("金额不得小于0.01元!");

						return false;
					}
				}

				this.$api.post({
					url: "portal/my/account_recharge",
					data: {
						money: mon,
						submit_type: 2
					},
					success: function(res) {
						// console.log(res);
						// order_id = res.order_id;
						if (res.code == 1) {
							var jsApiParameters = res.data.payData;
							that.order_id = res.data.order_id;
							// #ifdef H5
							that.qrcode = res.data.payData
							that.showDiv();
							// #endif

						} else {
							alert(res.msg);
						}
					},
					error: function(request) {
						alert("服务器繁忙!");
						return;
					},
				});
			},
		}
	};
</script>

<style>
	html,
	body {
		height: 100%;
		background: #f1f1f1;
		font-size: 14px;
	}

	.popup_overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}

	.popup_content {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 500rpx;
		height: 500rpx;
		margin-left: -270rpx;
		margin-top: -270rpx;
		border: 10px solid white;
		background-color: white;
		z-index: 1002;
		overflow: auto;
	}

	.popup_title {
		width: 480rpx;
		text-align: center;
		font-size: 32rpx;
	}



	.popup_textarea {
		width: 410rpx;
		font-size: 26rpx;
		margin-left: 20rpx;
	}

	.popup_button {
		color: #fff;
		font-size: 36rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.buttons {
		text-align: center;
		font-size: 50rpx;
		margin-top: 40rpx;
		background-color: #007AFF;
		color: #fff;
	}

	.displayFlex {
		display: flex;
	}

	.flex {
		flex: 1;
		text-align: center;
	}

	.flex_xy {
		display: flex;
		align-items: center;
		/*垂直居中*/
		justify-content: center;
		/*水平居中*/
	}

	.balance_btn button {
		height: 40px;
		line-height: 40px;
		margin: 10px;
		width: 100%;
	}

	.balance_btn {
		width: calc(100% - 20px);
	}

	.recharge {
		height: 160px;
		background: #fff;
		margin-bottom: 20px;
	}

	.recharge_money {
		font-size: 26px;
		margin-top: 10px;
	}

	a:link {
		text-decoration: none;
	}

	a:visited {
		text-decoration: none;
	}

	a:hover {
		text-decoration: none;
	}

	a:active {
		text-decoration: none;
	}

	.recharge {
		height: 160px;
		background: #fff;
		margin-bottom: 20px;
	}

	.recharge_money {
		font-size: 26px;
		margin-top: 10px;
	}

	.money_conetnt {
		padding: 20px;
	}

	.recharge_money span {
		width: .2rem;
	}

	.recharge_money input {
		width: calc(100% - 3.2rem)
	}

	.button.button-fill {
		background: #DF2E26;
		color: #fff
	}
</style>
